<template>
    <div class="addTag">
        <div class="addTagTitle">新增设备</div>
        <Form ref="formCustom" label-position="top" style="padding-top:15px;">
            <FormItem label="变电站">
                <Select v-model="formCustom.tsname" placeholder="选择变电站" filterable @on-change = "selectts">
                    <Option v-for="(item,key) in tslist" :value="item.id" :key="key">{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="设备编组"  v-if="show_devtype">
                <Select v-model="formCustom.devgroup" placeholder="选择设备编组" filterable>
                    <Option v-for="(item,key) in devgrouplist" :value="item.id" :key="key">{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="设备类型" v-if="show_devtype">
                <Select v-model="formCustom.devtype" placeholder="选择设备类型" filterable>
                    <Option v-for="(item,key) in devtypelist" :value="item.id" :key="key">{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="图片">
                <Upload
                    :before-upload="handleUpload"
                    :format="['jpg','jpeg','png']"
                    action="//jsonplaceholder.typicode.com/posts/"  style="width:100%;">
                    <Button type="ghost" icon="ios-cloud-upload-outline"  style="width:100%;">点击要选择上传的图片</Button>
                </Upload>
                <div v-if="file !== null" style="color:rgb(234, 144, 31);">当前选择图片:{{ file.name }}</div>
            </FormItem>
            <FormItem label="设备名称">
                <Input type="text" v-model="formCustom.devname"></Input>
            </FormItem>
            <FormItem label="设备编号">
                <Input type="text" v-model="formCustom.devcode"></Input>
            </FormItem>
            <FormItem label="报警温差值（单位：摄氏度℃）"  v-if="show_devtype">
                <InputNumber :min="1" v-model="formCustom.devwarntem" style="width:100%;"></InputNumber>
            </FormItem>
            <FormItem :label="tagtext">
                <Input type="text" v-model="formCustom.bindTag" disabled></Input>
            </FormItem>
            <FormItem style="text-align:center;">
                <Button type="primary" @click="handleSubmit" style="background-color: #ea901f;border-color: #ea901f;">确定</Button>
                <Button @click="handleBack" style="margin-left: 8px">取消</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import util from '../../util/util'
import replaceTagVue from './replaceTag.vue';
export default {
    data(){
        return {
            TagdeviceType:'tag',
            show_devtype:true,
            tagtext:'绑定标签',
            file: null,
            loadingStatus: false,
            formCustom:{
                tsname:'',
                devtype:'',
                devgroup:'',
                devname:'',
                devcode:'',
                devwarntem:10,
                bindTag:''
            },
            tslist:[],
            devtypelist:[],
            devgrouplist:[]
        }
    },
    created(){
        let uid = location.href.split('#')[0];
        uid = uid.split('&uid=')[1];
        this.$set(this.formCustom,'bindTag',uid);
        this.get_Ts_Type_Group();
        this.TagdeviceType = this.$router.history.current.params.device?this.$router.history.current.params.device:'tag';
        if(this.TagdeviceType=='tag'){
            this.tagtext = '绑定标签';
        }else if(this.TagdeviceType =='gateway'){
            this.tagtext = '网关识别号';
        }
    },
    methods:{
        get_Ts_Type_Group:function(tsname){
            let vm = this;
            util.ajax({
                method: 'get',
                url: '/util-api-sgdlist/?tsname='+tsname
            })
            .then(function (response) {
                if(response.status==200){
                    if(!tsname){
                        vm.tslist = [];
                        vm.devtypelist = [];
                        for(let i = 0;i<response.data.substation.length;i++){
                            vm.tslist.push(response.data.substation[i]);
                        }
                        for(let i = 0;i<response.data.device_type.length;i++){
                            vm.devtypelist.push(response.data.device_type[i]);
                        }
                    }
                    if(tsname){
                        //vm.$set(vm.formCustom,'devgroup','');
                        vm.devgrouplist = [];
                        vm.devgrouplist = response.data.device_group;
                    }
                    if(vm.TagdeviceType=='gateway'){
                        vm.show_devtype = false;
                    }
                }else{
                    vm.$Message.error('获取变电站列表失败');
                }
            })
            .catch(function(err){
                vm.$Message.error('网络错误');
            })
        },
        selectts:function(name){
            let vm = this;
            let tsname = '';
            for(let i = 0;i<vm.tslist.length;i++){
                if(vm.tslist[i].id==name){
                    tsname = vm.tslist[i].name;
                    break;
                }
            }
            this.get_Ts_Type_Group(tsname);
        },
        handleSubmit:function(){
            let uid = location.href.split('#')[0];
            uid = uid.split('&uid=')[1];
            if(this.TagdeviceType=='tag'){
                this.addTagdevice(uid);
            }else if(this.TagdeviceType=='gateway'){
                this.addGateway(uid);
            }
            //this.$router.push({name:'replaceTag',params:{addTag:true,uid:uid}});
        },
        handleBack:function(){
            this.$router.go(-1);
        },
        handleUpload (file) {
            if(file.type.indexOf('image')===-1){
                this.$Message.error('请选择图片文件');
                return false;
            }
            this.file = file;
            return false;
        },
        upload () {
            this.loadingStatus = true;
            setTimeout(() => {
                this.file = null;
                this.loadingStatus = false;
                this.$Message.success('Success')
            }, 1500);
        },
        addTagdevice:function(uid){
            let formData = new FormData();
            formData.append('did', this.formCustom.devcode);
            formData.append('name', this.formCustom.devname);
            formData.append('uid', this.formCustom.bindTag);
            formData.append('ts_index', this.formCustom.tsname);
            formData.append('type_index', this.formCustom.devtype);
            formData.append('group_index', this.formCustom.devgroup);
            formData.append('top_temp', this.formCustom.devwarntem);
            formData.append('pic_path', this.file);
            
            let vm = this;
            util.ajax({
                method: 'POST',
                url: '/api-device/',
                data:formData
            })
            .then(function (response) {
                if(response.status==201 || response.status==200){
                    vm.$store.commit('updateAddTagInfo',response.data);
                    vm.$router.push({name:'replaceTag',params:{addTag:true,uid:uid}});
                }
            })
            .catch(function(err){
                vm.$Message.error('网络错误');
            })
        },
        addGateway:function(uid){
         
            let formData = new FormData();
            formData.append('rid', this.formCustom.devcode);
            formData.append('name', this.formCustom.devname);
            formData.append('uid', this.formCustom.bindTag);
            formData.append('ts_index', this.formCustom.tsname);
            formData.append('pic_path', this.file);
            
            let vm = this;
            util.ajax({
                method: 'POST',
                url: '/api-reader/',
                data:formData
            })
            .then(function (response) {
                if(response.status==201){
                    vm.$store.commit('updateAddTagInfo',response.data);
                    vm.$router.push({name:'replaceTag',params:{addTag:true,uid:uid}});
                }
            })
            .catch(function(err){
                vm.$Message.error('网络错误');
            })
        }
    }
}
</script>
<style scoped>
    .addTag{
        padding: 20px 5%;    
    }
    .addTagTitle{
        width: 100%;
        height: 70px;
        text-align: center;
        font-size: 20px;
        line-height: 70px;
        border-bottom: 1px solid #f3f3f3;
    }
</style>
